<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="JS/jquery-3.3.1.js"></script>
    <style type="text/css">
    ul{
        background-color: #1c1f21;
        width: 185px;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        font-family: "微软雅黑";
    }
    li{
        margin-left: -35px;
        list-style-type: none;
        width: 215px;
        height: 60px;
        line-height: 60px;
        background-color: #1c1f21;
        color: #d0d0d0; 
        text-align: center;
    }
    .a,.b,.c,.d{
        display: none;
    }
    .red{
        color: rgb(182, 57, 77);
    }
    .bk{
        background-color: #b1b1b1;
    }
    </style>
    <script type="text/javascript">
    $(function(){
        $("#a").click(function(){
            $(".a").removeClass("a");
            $(this).addClass("red");
        });
        $(".a").hover(function(){
            $(this).addClass("bk");
        });
        $("#b").click(function(){
            $(".b").removeClass("b");
            $(this).addClass("red");
        });
        $("#c").click(function(){
            $(".c").removeClass("c");
            $(this).addClass("red");
        });
        $("#d").click(function(){
            $(".d").removeClass("d");
            $(this).addClass("red");
        });
    });
    </script>
</head>
<body>
    <ul>
        <li id="a">前端开发</li>
        <li class="a">HTML/CSS</li>
        <li class="a">JavaScript</li>
        <li class="a">jQuery</li>

        <li id="b">后端开发</li>
        <li class="b">PHP</li>
        <li class="b">Java</li>
        <li class="b">C</li>
        <li class="b">C++</li>

        <li id="c">移动开发</li>
        <li class="c">Android</li>
        <li class="c">IOS</li>

        <li id="d">数据库</li>
        <li class="d">MySQL</li>
        <li class="d">MongoDB</li>
    </ul>
</body>
</html>